import  React, { useEffect, useState } from 'react'
import { View, Image } from '@tarojs/components'
import ImgLaoHu from "@/assets/laohu.jpeg";
import './index.scss'

// 样式数据类型
type STYLE_CHILD = {
  pagePadding: VALUE,
  cmpUpperPadding: VALUE,
  cmpLowerPadding: VALUE,
  cmpRadius: VALUE,
  cmpBackground?: VALUE,
}
type STYLE = {
  label: string,
  type: string,
  child: STYLE_CHILD
}
// 值的数据类型
type VALUE = {
  label: string,
  type: string,
  value: string | number
}

type IMG_CHILD = {
  imgPath?:  VALUE,
  jumpPath?:  VALUE
}

type IMG_VALUE = {
  child: IMG_CHILD,
  label: string,
  type: string
}

interface Props {
  styles: STYLE;
  // value: IMG_VALUE;
};

// 做一个数据个映射
const styleTable = {
  pagePadding: "padding",
  cmpUpperPadding: "paddingTop",
  cmpLowerPadding: "paddingBottom",
  cmpBackground: "backgroundColor",
  cmpRadius: "borderRadius"
  // const strArr = ["titleColor", "cmpBackground", "infoColor"];
}

const HeImg = (props: Props) => {
  const { styles} = props;
  const [comStyle, setComStyle] = useState({});
  const [imgStyle, setImgStyle] = useState({});

  const handleStyle = (child, model) => {
    let objCom = {};
    let imgObjCom = {
      width: "100%",
      height: "auto",
      display: "block"  
    };
    for (let key in child) {
      const element = child[key];
      if( styleTable[key] == 'backgroundColor') {
        objCom[styleTable[key]] = element.value;
      } 
      else if (key == 'cmpRadius') {
        imgObjCom[styleTable[key]] = element.value + 'px'
      }else {
        objCom[styleTable[key]] = element.value + 'px'
      }
    }
    if(model?.value) {
      if(model?.value == "left") {
        objCom["flexDirection"] = "row"
        objCom["alignItems"] = "flex-end"

      }
      if(model?.value == "center") {
        objCom["flexDirection"] = "column"
        objCom["alignItems"] = "center"
      }
    }
    return {objCom, imgObjCom};
  }
  useEffect(() => {
    let {objCom, imgObjCom} = handleStyle(styles?.child, {});
    console.log("---stylessss--");
    setComStyle(objCom);
    setImgStyle(imgObjCom);
  }, [styles]);

  return (
    <View  style={comStyle}  className='he-img'>
      <Image style={imgStyle}  src={ImgLaoHu}></Image>
    </View>
  )
}

export default HeImg;